/**
 * #info
 *
 *@author   wuwg
 *@createTime   2018/03/20
 *@updateTime   2018/05/19
 *@description  submenu  component  子菜单组件
 */
/**
 * #item
 *
 * @type        aty-submenu
 * @cn          子菜单
 * @nameprop   text
 * @stPlugin    false
 * @stContainer false
 * @children    [aty-menu-item,aty-submenu,aty-menu-group]
 * @parents     [aty-menu,aty-submenu,aty-menu-group]
 */
import config from '../../../../config/config.js'

// components
import Icon from '../../../basic/icon/index.vue'
import Drop from '../../../form/select/dropdown/index.vue'
import CollapseTransition from '../../../base/collapse-transition.js'
// mixins
import Emitter from '../../../../mixins/emitter.js'
import mixin from './../mixin/mixin'
import clickoutside from "../../../../directives/clickoutside";
import TransferDom from "../../../../directives/transfer-dom";
// prefix
const prefixCls = config.prefix + '-menu'
//  module
export default {
  name: config.prefix + '-submenu',
  mixins: [Emitter, mixin],
  components: { Icon, Drop, CollapseTransition },
  directives: { clickoutside, TransferDom },
  props: {
    /**
     * #property
     *
     * @name      code
     * @cn       子菜单标题
     * @type     string,number
     * @auto     true
     * @required true
     * @description 子菜单标题，必填，
     */
    code: {
      type: [String, Number],
      required: true
    },
    /**
     * #property
     *
     * @name    disabled
     * @cn      是否禁用
     * @type    boolean
     * @value  false
     * @description 是否禁用
     */
    disabled: {
      type: Boolean,
      default: false
    },
    /**
     * #property
     *
     * @name  text
     * @cn    文本
     * @type  string
     * @value 子菜单标题
     * @description 子菜单标题的内容
     */
    text: {
      type: String,
      default: '子菜单标题'
    },
    /**
     * #property
     *
     * @name icon
     * @cn   图标
     * @type icon
     * @description 该子菜单标题的图标
     */
    icon: {
      type: String
    },
    /**
     * #property
     *
     * @name    animate
     * @cn      是否有动画
     * @type    boolean
     * @bind    must
     * @value   false
     * @description 是否有动画，点击展开/收起 子菜单是否有动画效果，默认为false
     */
    animate: {
      type: Boolean,
      default: false
    },
    /**
     * #property
     *
     * @name    transfer
     * @cn      是否将弹层放置于 body 内
     * @group   控制
     * @type    boolean
     * @bind  must
     * @value  true
     * @description  是否将弹层放置于 body 内，
     *              在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果
     */
    transfer: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      visible: true,
      prefixCls: prefixCls,
      active: false, // 控制样式
      opened: false, // 控制展开收起
      dropWidth: parseFloat(Artery.getStyle(this.$el, 'width'))
    }
  },
  computed: {
    classes () {
      return [
                `${prefixCls}-submenu`,
                {
                  [`${prefixCls}-item-active`]: this.active && !this.hasParentSubmenu,
                  [`${prefixCls}-opened`]: this.opened,
                  animate: this.animate,
                  [`${prefixCls}-submenu-disabled`]: this.disabled,
                  [`${prefixCls}-submenu-has-parent-submenu`]: this.hasParentSubmenu,
                  [`${prefixCls}-child-item-active`]: this.active
                }
      ]
    },
    iconClass () {
      return [
        config.prefix + '-img-icon'
      ]
    },
    accordion () {
      return this.menu.accordion
    },
    dropClass () {
      return [
        prefixCls + '-dropdown',
        { [prefixCls + '-transfer']: this.transfer }
      ]
    },
    dropStyle () {
      const style = {}

      if (this.dropWidth) style.minWidth = `${this.dropWidth}px`
      return style
    },
    titleStyle () {
      return this.hasParentSubmenu && this.mode !== 'horizontal' ? {
        paddingLeft: 43 + (this.parentSubmenuNum - 1) * 24 + 'px'
      } : {}
    }
  },
  methods: {
    //  鼠标划入（当菜单模式是横向时候生效）
    handleMouseenter () {
      if (this.disabled) {
        return
      }
      if (this.mode === 'vertical') {
        return
      }
      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        this.menu.updateOpenKeys(this.code)
        // 展开下拉
        this.opened = true
      }, 250)
    },
    handleMouseenterDrop () {
      // 解决鼠移入弹出层后弹出层消失的问题
      if (this.timeout) {
        clearTimeout(this.timeout)
      }
    },
    //  鼠标离开（当菜单模式是横向时候生效）
    handleMouseleave () {
      if (this.disabled) {
        return
      }
      if (this.mode === 'vertical') {
        return
      }
      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        this.menu.updateOpenKeys(this.code)
        // 收起下拉
        this.opened = false
      }, 150)
    },
    //  鼠标点击
    handleClick (event) {
      if (this.disabled) {
        return
      }
      if (this.mode === 'vertical') {
        this.verticalClick()
        this.opened = !this.opened
      }
      /*
       * if (this.mode === 'horizontal') { // 修改bug，正常都应该抛出事件
       *     this.$emit('click', {code: this.code, text: this.text}, event);
       *     return;
       * }
       */

      /**
       * #event
       *
       * @name    click
       * @param   item    当前点击的条目
       * @param   event    event对象
       * @body    console.log("点击了"+item);
       * @description   点击时触发
       */
      this.$emit('click', { code: this.code, text: this.text }, event)
    },

    /**
     * 竖菜单，父菜单点击
     */
    verticalClick () {
      if (this.accordion) {
        this.$parent.$children.forEach(item => {
          if (item.$options.name === config.prefix + '-submenu') {
            item.opened = false
          }
        })
      }
      this.menu.updateOpenKeys(this.code)
    }
  },
  watch: {
    mode (val) {
      if (val === 'horizontal') {
        this.$refs.drop.update()
      }
    },
    opened (val) {
      if (this.mode === 'vertical') {
        return
      }
      if (val) {
        // set drop a width to fixed when menu has fixed position
        this.dropWidth = parseFloat(Artery.getStyle(this.$el, 'width'))
        this.$refs.drop.update()
      } else {
        this.$refs.drop.destroy()
      }
    }
  },
  mounted () {
    /*
     *  menu-item-select
     * [2019年6月27日 17:30:08 by Vinsea] 这个 $on 好像没什么用，没有找到触发submenu组件的 menu-item-select 事件
     */
    this.$on('menu-item-select', (menuItem) => {
      if (this.mode === 'horizontal') {
        this.opened = false
      } else {
        this.opened = true
      }
      this.active = true
      this.dispatch(config.prefix + '-menu', 'menu-item-select', menuItem)
    })
    // update-active-name
    this.$on('update-active-code', (menu) => {
      // [2019年6月27日 19:16:07 by Vinsea]
      this.active = !!menu
      if (!this.active) {
        this.handleMouseleave()
        return
      }
      if (menu.isClick) {
        // 横向菜单如果子菜单被点击，需要收起菜单
        this.opened = this.mode === 'vertical'
      } else if (menu.isShowSubMenu) {
        /*
         * 如果menu组件设置showSubMenu，并且动态修改了 activeCode 的话，就自动展开菜单
         * 竖向菜单和横向菜单的展开不一样
         */
        if (this.mode === 'vertical') {
          this.verticalClick()
          this.opened = true
        } else {
          this.handleMouseenter()
        }
      }
      this.dispatch(config.prefix + '-submenu', 'update-active-code', menu)
      /*
       * if (Artery.findComponentsDownward(this,  config.prefix+'-submenu')) {
       *
       *}
       */
      /*
       *   if (Artery.findComponentsDownward(this, config.prefix+'-submenu')) {
       * Artery.findComponentsDownward(this, config.prefix+'-submenu').forEach(item => {
       * item.active = false;
       * });
       *}
       */
    })
    // 调用展开收起
    if (this.menu && this.menu.openCodes.length > 0) {
      this.menu.updateOpened()
    }
  }
}
